<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验5：图片的DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			fieldset p{width: 225px;word-wrap:break-word;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li id="li1"><img src="img/doc.gif">获取原始图片路径</li>
					<li id="li2"><img src="img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li id="li3"><img src="img/doc.gif"><a onclick="createI()">创建图片</a></li>
					<li id="li4"><img src="img/doc.gif"><a onclick="copy()">克隆图片</a></li>
					<li id="li5"><img src="img/doc.gif"><a onclick="xiugai()">改变图片</a></li>
					<li id="li6"><img src="img/doc.gif"><a onclick="del()">删除图片</a></li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li id="li7"><img src="img/doc.gif"><a onclick="Style()">为原始图片加上行间样式</a></li>
					<li id="li8"><img src="img/doc.gif"><a onclick="IStyle()">为所有的fieldset加上内部样式</a></li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//189000503  左香菊
			//菜单收缩与扩展
			function show(item) {
				let currentMenu = document.getElementById(item);
				let currentStatus = currentMenu.style.display;
				currentMenu.style.display = currentStatus == "" ? "none" : "";
			}
			//获取图片原始路径
			document.getElementById("li1").onclick = function (){
				let path = document.getElementById("fruit").src;
				if(path != null){
					(function (){
					document.getElementById("msg1").innerHTML = path ;
					})();
				}
			}
			//我喜欢的水果
			document.getElementById("li2").onclick = function (){
				let rdsObj = document.getElementsByName("enjoy");
				let checkVal = new Array();
            	let k = 0;
    			for(let i=0;i<rdsObj.length;i++){
         			if(rdsObj[i].checked){
						checkVal[k] = rdsObj[i].value;
                		k++;
       				}
					document.getElementById("msg2").innerHTML = "我喜欢" + checkVal ;
				}     
			}
			//创建图片
			document.getElementById("li3").onclick = function (){
				let img = document.createElement('img');//创建一个标签
				img.setAttribute('src','img/grape.jpg');
				document.getElementById('msg3').appendChild(img);//放到指定的id里
			}
			//克隆图片
            document.getElementById("li4").onclick = function (){
				let msg4 = document.getElementById("msg4");
            	let img = document.getElementById("fruit");
                msg4.appendChild(img.cloneNode());
            }
			//改变图片
			document.getElementById("li5").onclick = function (){
				let Id = document.getElementById("fruit");
				Id.setAttribute("src","img/grape.jpg");

			}
			//删除图片
			document.getElementById("li6").onclick = function (){
				let Id = document.getElementById("fruit");
				Id.remove(Id);
				
			}
			//添加行间样式
			document.getElementById("li7").onclick = function (){
				let Id = document.getElementById("fruit");
				Id.style.border="#f00 6px solid";
			}
			//添加内部样式
			document.getElementById("li8").onclick = function (){
				let Ids = document.getElementsByTagName("fieldset");
				for(let i=0; i<= Ids.length; i++){
					Ids[i].setAttribute("class","newcss1");
				}
			}

			
		</script>
	</body>
</html>
